<template>
	<view class="user-dynamic">
		<view class="index-item index-item-5" v-if="BrowseUserList.length" style="margin: 0 0 20rpx; border-radius: 0; padding-top: 0;">
			<view class="index-item-5-list">
				<view class="index-item-5-item" v-for="(item,index) in BrowseUserList" :key="index" @click="goFootPrintDetails(item.user_id,0)">
					<view class="index-item-5-item-top">
						<image :src="item.heard_img"></image>
						<view class="index-item-5-item-top-left">
							<view class="top">{{item.nickname}} <text class="time">{{item.add_time}}</text></view>
							<view class="bottom">
								ID:{{item.user_id}}
								<text><text v-if="item.type==1">小程序：</text><text v-if="item.type==2">APP：</text><text v-if="item.type==3">H5：</text><text
									 v-if="item.type==4">PC：</text><text v-if="item.type==5">Ipad：</text><text v-if="item.type==6">后台系统：</text>{{item.num}}次</text>
							</view>
						</view>
					</view>
					<view class="index-item-5-item-bottom">
						<text>TA：{{item.foot_where}}</text>
						<button plain type="primary" size="mini">查看详情</button>
					</view>
				</view>
			</view>
		</view>
		<pt-nothing
			text="暂无用户动态" 
			:fixed="true" 
			v-if="noData" 
			icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
		</pt-nothing>
		
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-if="BrowseUserList.length > 4" />
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noData: false,
				more: false,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				parent_id: 0,
				page: 0,
				BrowseUserList: []
			};
		},
		onLoad(options) {
			this.parent_id = options.parent_id
			this.init()
		},
		methods: {
			init() {
				let data = {
					page: this.page,
					limit: 10,
					// store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					group: 1,
					// is_new: 1,
					parent_id: this.parent_id
				}
				this.$u.apiWei.BrowseUserList(data).then(res => {
					if (res.datas.list.length) {
						res.datas.list.forEach(item => {
							this.BrowseUserList.push(item)
						})
						this.more = true
					} else {
						this.more = false
					}
					if (this.BrowseUserList.length == 0 && this.page == 0) this.noData = true
				})
			},
			goFootPrintDetails(user_id, type) {
				uni.navigateTo({
					animationDuration: 500,
					url: '/my/user-dynamic/user-dynamic-info/user-dynamic-info?user_id=' + user_id + '&type=' + type
				})
			},
			onReachBottom() {
				this.status = 'loading';
				setTimeout(() => {
					this.status = 'nomore';
				}, 1000)
				if (!this.more) return;
				this.page++;
				this.init()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFC;
	}

	.user-dynamic {
		padding-top: 20rpx;

		.index-item-5 .index-item-5-list .index-item-5-item {
			padding: 40rpx 20rpx;
			border-bottom: solid 2rpx #EEE;
			background-color: #FFF;
		}

		.index-item-5 .index-item-5-list .index-item-5-item:last-child {
			border-bottom: none;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .index-item-5-item-top {
			display: flex;
			align-items: center;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .index-item-5-item-top image {
			width: 80rpx;
			height: 80rpx;
			background-color: #EEE;
			border-radius: 50%;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .index-item-5-item-top .index-item-5-item-top-left {
			flex: 1;
			margin: 0 20rpx;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .index-item-5-item-top .index-item-5-item-top-left view.top {
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .index-item-5-item-top .index-item-5-item-top-left view.top text {
			font-size: 22rpx;
			color: #999;
			flex: 1;
			margin-left: 10rpx;
			text-align: right;
			margin-top: 0;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .index-item-5-item-top .index-item-5-item-top-left view.bottom {
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
			font-size: 22rpx;
			color: #999;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .index-item-5-item-top .index-item-5-item-top-left view.bottom text {
			font-size: 24rpx;
			color: #666;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .index-item-5-item-top .index-item-5-item-top-right {
			text-align: right;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .index-item-5-item-top .index-item-5-item-top-right view {
			font-size: 24rpx;
			color: #666;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .index-item-5-item-top .index-item-5-item-top-right text {
			color: #999;
			font-size: 22rpx;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .index-item-5-item-bottom {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .index-item-5-item-bottom button {
			height: 48rpx;
			line-height: 44rpx;
			border-color: #141414;
			color: #FFF;
			background-color: #141414;
			border-radius: 8rpx;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .index-item-5-item-bottom text {
			font-size: 26rpx;
			color: #666;
			flex: 1;
			min-width: 0;
			margin-right: 30rpx;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .index-item-5-item-bottom view {
			font-size: 32rpx;
			display: inline-block;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .index-item-5-item-bottom view image {
			width: 24rpx;
			height: 30rpx;
			vertical-align: middle;
			margin: 0 10rpx 0 0;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .index-item-5-item-bottom view.call {
			height: 50rpx;
			line-height: 50rpx;
			color: #2073f5;
			padding: 0 50rpx;
			border: 2rpx solid #2073f5;
			border-radius: 25rpx;
			font-size: 28rpx;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .footprint-goods {
			display: flex;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .footprint-goods image {
			width: 140rpx;
			height: 140rpx;
			border: solid 1px #EEE;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .footprint-goods .index-item-5-item-bottom-info {
			flex: 1;
			min-width: 0;
			position: relative;
			height: 140rpx;
			margin-left: 20rpx;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .footprint-goods .index-item-5-item-bottom-info view {
			display: block;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .footprint-goods .index-item-5-item-bottom-info view.title {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .footprint-goods .index-item-5-item-bottom-info view.price {
			font-size: 20rpx;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .footprint-goods .index-item-5-item-bottom-info view.price text {
			font-size: 28rpx;
			color: #333;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .footprint-goods .index-item-5-item-bottom-info view.times {
			font-size: 22rpx;
			color: #666;
			margin-top: 10rpx;
		}

		.index-item-5 .index-item-5-list .index-item-5-item .footprint-goods .index-item-5-item-bottom-info button {
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}
</style>
